<template>
	<view class="personinfo">
		<view class="personinfolist">
			<view class="personinfolistbox" @tap="editFun">
				<view class="left">
					头像
				</view>
				<view class="right">
					<image class="personinfoimg" :src="userInfo.exts.headimgurl" mode="aspectFill"></image>
				</view>
			</view>
			<view class="personinfolistbox" @tap="editFun">
				<view class="left">
					ID
				</view>
				<view class="right">
					{{userInfo.id.toString().padEnd(6, '0')}}
				</view>
			</view>
			<view class="personinfolistbox" @tap="editFun">
				<view class="left">
					昵称
				</view>
				<view class="right">{{userInfo.realname}}</view>
			</view>
			<view class="personinfolistbox" @tap="editFun">
				<view class="left">
					邮箱号
				</view>
				<view class="right">
					{{userInfo.email}}
				</view>
			</view>
			<view class="personinfolistbox" @tap="editFun">
				<view class="left">
					身份证号
				</view>
				<view class="right">
					{{userInfo.IDNumber}}
				</view>
			</view>
			<view class="personinfolistbox" @tap="phoneFun">
				<view class="left">
					手机号
				</view>
				<view class="right">
					{{userInfo.phone}}
				</view>
			</view>
			<view class="personinfolistbox2" @tap="editFun">
				<view class="left">
					简介
				</view>
				<view class="right">
					{{userInfo.description}}
				</view>
			</view>
			<view class="personinfolistboxbtn btn-class-w-h" @tap="SignoutFun">
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				personinfo: {
					avatar_url: ''
				}
			}
		},
		computed: {
			...mapGetters([
				'userInfo',
			])
		},
		mounted() {},
		methods: {
			// 编辑个人资料
			editFun() {
				uni.navigateTo({
					url: 'uni_Changeimg'
				});
			},
			// 手机号
			phoneFun() {
				uni.navigateTo({
					url: 'uni_Bindphone'
				});
			},
			// 绑定上下级
			superiorFun() {
				uni.navigateTo({
					url: 'uni_Bindsuperior'
				});
			},
			// 收货地址
			AddressFun() {
				uni.navigateTo({
					url: 'uni_Addresslist'
				});
			},
			wxLogoutApiFun() {
				var that = this;
				var param = {
					// userId:this.userInfo?this.userInfo.id:'' //加上参数 就表示 退出登录后，删除当前用户
				}
				this.$apiFun.getApi(this.$api.wxLogoutApi, param, function(res) {
					const {
						code,
						data
					} = res
					if (code == 200) {
						uni.showToast({
							title: '退出登录!',
							icon: 'none'
						})
					}
				}, function(err) {});
			},
			//退出登录
			SignoutFun() {
				uni.showModal({
				  title: '提示',
				  content: '确定退出登录？',
				  success: function (res) {
				    if (res.confirm) {
				    	uni.clearStorageSync()
				    	this.$store.dispatch('setLoginStatus', null)
				    	this.$store.dispatch('setUserInfos', {})
				    	setTimeout(() => {
				    		uni.reLaunch({
				    			url: '/pages/uni_Home'
				    		})
				    	}, 2000)
				    } else if (res.cancel) {
				      console.log('用户点击取消');
				    }
				  }
				});
			}
		}
	}
</script>
<style>
	page {
		height: 100%;
		background: #000000;
		color: white;
	}
</style>
<style scoped lang="less">
	.personinfo {
		height: 100vh;
		background-color: #000000;
	}

	.personinfolist {
		background-color: #000000;
	}

	.personinfolistbox {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		height: 98rpx;
		line-height: 98rpx;
		background-color: rgba(255, 255, 255, 0.1);
		margin-bottom: 10rpx;
		display: flex;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 1);

		.left {
			width: 30%;
			color: rgba(255, 255, 255, 1);

		}

		.right {
			padding-right: 30rpx;
			box-sizing: border-box;
			background: url(/static/img/godtail.png) no-repeat right;
			background-position-y: center;
			background-size: 12rpx 22rpx;
			text-align: right;
			width: 70%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.personinfolistbox2 {
		width: 100%;
		padding: 23rpx 30rpx;
		box-sizing: border-box;
		background-color: rgba(255, 255, 255, 0.1);
		margin-bottom: 10rpx;
		display: flex;
		align-items: flex-start;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 1);
	
		.left {
			width: 30%;
			color: rgba(255, 255, 255, 1);
	
		}
	
		.right {
			flex:1;
			padding-right: 30rpx;
			box-sizing: border-box;
			background: url(/static/img/godtail.png) no-repeat right;
			background-position-y: center;
			background-size: 12rpx 22rpx;
			text-align: left;
			width: 70%;
		}
	}
	.personinfolistbox1 {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		height: 98rpx;
		line-height: 98rpx;
		background-color: rgba(255, 255, 255, 0.1);
		margin-bottom: 10rpx;
		display: flex;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 1);

		.left {
			width: 40%;
			color: rgba(255, 255, 255, 1);

		}

		.right {
			padding-right: 30rpx;
			box-sizing: border-box;
			background: url(/static/img/godtail.png) no-repeat right;
			background-position-y: center;
			background-size: 12rpx 22rpx;
			text-align: right;
			width: 60%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.personinfoimg {
		width: 77rpx;
		height: 77rpx;
		margin-top: 10rpx;
		border-radius: 77rpx;
	}

	.personinfolistboxbtn {
		position: fixed;
		bottom: 50rpx;
		left: 5%;
		padding: 0 30rpx;
		box-sizing: border-box;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		width: 90%;
		margin: 0 auto;
		border-radius: 98rpx;
	}
</style>